<template>
    <div class="index">
        <div class="toparea">
            <div class="status_row">
                <div class="status_description">
                    <img src="../assets/绿色指示灯.png" class="noticelamp">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/黄色指示灯.png" class="noticelamp">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/红色指示灯.png" class="noticelamp">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="statusarea">
                <p class="topic">状态监控</p>
                <div class="statuscontent">
                    <div class="bakeprocesslist">
                        <div class="totalstatus" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="title" :style="{ color: getColor(bakeprocess.status) }">烘烤-工艺线</p>
                            <img src="../assets/绿色指示灯.png" class="lamp" v-show="bakeprocess.isrun">
                            <img src="../assets/黄色指示灯.png" class="lamp" v-show="bakeprocess.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="lamp" v-show="bakeprocess.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakeline1.status) }">烘烤1线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakeline1.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakeline1.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakeline1.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakeline2.status) }">烘烤2线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakeline2.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakeline2.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakeline2.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakeline3.status) }">烘烤3线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakeline3.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakeline3.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakeline3.isshutdown" v-if="isFlashing">
                        </div>
                    </div>
                    <div class="bakelogisticslist">
                        <div class="totalstatus" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="title" :style="{ color: getColor(bakelogistics.status) }">烘烤-物流线</p>
                            <img src="../assets/绿色指示灯.png" class="lamp" v-show="bakelogistics.isrun">
                            <img src="../assets/黄色指示灯.png" class="lamp" v-show="bakelogistics.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="lamp" v-show="bakelogistics.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakeload.status) }">上料机械手</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakeload.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakeload.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakeload.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakedispatch.status) }">调度机器人</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakedispatch.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakedispatch.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakedispatch.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="bake" @click="$router.push('/bake')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(bakeunload.status) }">下料机械手</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="bakeunload.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="bakeunload.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="bakeunload.isshutdown" v-if="isFlashing">
                        </div>
                    </div>
                    <div class="weldinglist">
                        <div class="totalstatus" @click="$router.push('/welding')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="title" :style="{ color: getColor(welding.status) }">封口焊</p>
                            <img src="../assets/绿色指示灯.png" class="lamp" v-show="welding.isrun">
                            <img src="../assets/黄色指示灯.png" class="lamp" v-show="welding.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="lamp" v-show="welding.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="welding" @click="$router.push('/welding')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(weldingline1.status) }">封口焊1线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="weldingline1.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="weldingline1.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="weldingline1.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="welding" @click="$router.push('/welding')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(weldingline2.status) }">封口焊2线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="weldingline2.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="weldingline2.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="weldingline2.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="welding" @click="$router.push('/welding')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(weldingline3.status) }">封口焊3线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="weldingline3.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="weldingline3.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="weldingline3.isshutdown" v-if="isFlashing">
                        </div>
                    </div>
                    <div class="detectionlist">
                        <div class="totalstatus" @click="$router.push('/detection')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="title" :style="{ color: getColor(detection.status) }">二次氦检</p>
                            <img src="../assets/绿色指示灯.png" class="lamp" v-show="detection.isrun">
                            <img src="../assets/黄色指示灯.png" class="lamp" v-show="detection.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="lamp" v-show="detection.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="detection" @click="$router.push('/detection')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(detectionline1.status) }">二次氦检1线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="detectionline1.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="detectionline1.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="detectionline1.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="detection" @click="$router.push('/detection')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(detectionline2.status) }">二次氦检2线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="detectionline2.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="detectionline2.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="detectionline2.isshutdown" v-if="isFlashing">
                        </div>
                        <div class="detection" @click="$router.push('/detection')"
                        @mouseenter="hover = true"
                        @mouseleave="hover = false"
                        :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                            <p class="eqpname" :style="{ color: getColor(detectionline3.status) }">二次氦检3线</p>
                            <img src="../assets/绿色指示灯.png" class="eqpstatus1" v-show="detectionline3.isrun">
                            <img src="../assets/黄色指示灯.png" class="eqpstatus2" v-show="detectionline3.isstandby" v-if="isFlashing">
                            <img src="../assets/红色指示灯.png" class="eqpstatus3" v-show="detectionline3.isshutdown" v-if="isFlashing">
                        </div>
                    </div>
                </div>
            </div>
            <div class="graphicarea">
                <p class="topic">近七天生产数据</p>
                <div class="graphiccontent">
                    <div class="graphic">
                        <p class="graphictopic">各工序每天产能良率数据</p>
                        <div id="chart1"></div>
                    </div>
                    <div class="graphic">
                        <p class="graphictopic">各工序每天NG类别数据</p>
                        <div id="chart2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.index{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
    color: white;
    /* position: relative; */
}
.alarm_remind{
    width: 3.75rem;
    height: 3.4375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top-right-radius: .625rem;
    border-bottom-right-radius: .625rem;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.25rem;
    cursor: default;
}
.alarm_remind:hover{
    cursor: pointer; /* 鼠标移入时改变光标 */
}
.alarmtable{
    font-size: 1rem;
}
/* .el-table::before {
    height: 0;
} */
.toparea{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
}
.currenttime{
    font-size: 1.25rem;
    position: absolute;
    right: 1.875rem;
}
.status_row{
    width: 30%;
    /* height: 100%; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 6.25rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.noticelamp{
    width: 2.75rem;
    height: 2.1875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.mainarea{
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.statusarea{
    width: 66%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.topic{
    width: 100%;
    height: 2.5rem;
    background-image: linear-gradient(to right, #252c56, #090f2f);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    /* margin-bottom: .3125rem; */
}
.topic::before{
    content: "";
    width: .625rem;
    height: .625rem;
    /* border-radius: 50%; */
    background: lightblue;
    margin: 0 .625rem;
}
.statuscontent{
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: .125rem solid rgba(41, 224, 227, 1);
    border-radius: .625rem;
    background: rgba(41, 180, 227, 0.1);
}
.bakeprocesslist, .bakelogisticslist, .weldinglist, .detectionlist{
    width: 23%;
    height: 92%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border: .0625rem dashed rgba(41, 224, 227, 1);
    border-radius: .5rem;
}
.totalstatus{
    width: 85%;
    height: 6.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* position: relative; */
    /* background: #252c56; */
    font-size: 1.5rem;
    border-radius: .5rem;
    border: .0625rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .625rem rgba(41, 211, 227, 1);
}
.title{
    /* width: 100%;
    height: 3.125rem; */
    /* background-image: linear-gradient(to right, #252c56, #090f2f); */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-bottom: 2.8125rem;
}
.lamp{
    width: 3.125rem;
    height: 2.5rem;
    /* position: relative; */
    margin-top: 2.5rem;
}
.bake, .welding, .detection{
    width: 68%;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.25rem;
    border-radius: .5rem;
    border: .0625rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .625rem rgba(41, 211, 227, 1);
}
.eqpname{
    /* font-weight: 600; */
    position: absolute;
    margin-bottom: 2.1875rem;
}
.eqpstatus1, .eqpstatus2, .eqpstatus3{
    width: 2.375rem;
    height: 1.875rem;
    margin-top: 1.875rem;
}
.graphicarea{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.graphiccontent{
    width: 100%;
    height: 90%;
    border: .125rem solid rgba(41, 224, 227, 1);
    border-radius: .625rem;
    background: rgba(41, 180, 227, 0.1);
    display: flex;
    flex-direction: column;
}
.graphic{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.graphictopic{
    color: rgba(41, 224, 227, 1);
    font-weight: bold;
    /* margin-bottom: .3125rem; */
}
#chart1, #chart2{
    width: 100%;
    height: 88%;
    background: #131b4a;
}
</style>
<script>
import * as echarts from 'echarts';
import { EventBus } from '../assets/event-bus'
import { EleResize } from '../assets/esresize'// 图表自适应
// import {socket1,establishCommunication1} from '../assets/socket.js'
export default{
    mounted(){
        // establishCommunication1()
        // this.getMessage()
        this.getCurrentState()
        EventBus.$on('saveCurrentState', this.getCurrentState)
        this.getDayProduction()
        EventBus.$on('saveDayProduction', this.getDayProduction)
        // this.bakeline1Oven1.status='1'
        // this.bakeline1Oven2.status='1'
        // this.bakeline1CoolingBox.status='1'
        // this.bakeline1Oven3.status='1'
        // this.bakeline1Oven4.status='1'
        // this.bakeline2Oven1.status='1'
        // this.bakeline2Oven2.status='1'
        // this.bakeline2CoolingBox.status='2'
        // this.bakeline2Oven3.status='1'
        // this.bakeline2Oven4.status='1'
        // this.bakeline3Oven1.status='1'
        // this.bakeline3Oven2.status='1'
        // this.bakeline3CoolingBox.status='1'
        // this.bakeline3Oven3.status='1'
        // this.bakeline3Oven4.status='1'

        // this.bakeline1load.status='1'
        // this.bakeline2load.status='2'
        // this.bakeline3load.status='1'
        // this.bakeline1dispatch.status='1'
        // this.bakeline2dispatch.status='1'
        // this.bakeline3dispatch.status='1'
        // this.bakeline1unload.status='3'
        // this.bakeline2unload.status='2'
        // this.bakeline3unload.status='1'
        // this.weldingline1.status='1'
        // this.weldingline2.status='1'
        // this.weldingline3.status='1'
        // this.detectionline1.status='1'
        // this.detectionline2.status='2'
        // this.detectionline3.status='1'
        this.startFlashing();
        this.initChart();
        this.fetchData();
    },
    data(){
        return{
            dialogTableVisible: false,
            isFlashing:undefined,
            hover:false,
            currentTime: this.getCurrentDateTime(),
            bakeline1Oven1:{
                status:''
            },
            bakeline1Oven2:{
                status:''
            },
            bakeline1CoolingBox:{
                status:''
            },
            bakeline1Oven3:{
                status:''
            },
            bakeline1Oven4:{
                status:''
            },
            bakeline2Oven1:{
                status:''
            },
            bakeline2Oven2:{
                status:''
            },
            bakeline2CoolingBox:{
                status:''
            },
            bakeline2Oven3:{
                status:''
            },
            bakeline2Oven4:{
                status:''
            },
            bakeline3Oven1:{
                status:''
            },
            bakeline3Oven2:{
                status:''
            },
            bakeline3CoolingBox:{
                status:''
            },
            bakeline3Oven3:{
                status:''
            },
            bakeline3Oven4:{
                status:''
            },
            bakeline1load:{
                status:''
            },
            bakeline2load:{
                status:''
            },
            bakeline3load:{
                status:''
            },
            bakeline1unload:{
                status:''
            },
            bakeline2unload:{
                status:''
            },
            bakeline3unload:{
                status:''
            },
            bakeline1dispatch:{
                status:''
            },
            bakeline2dispatch:{
                status:''
            },
            bakeline3dispatch:{
                status:''
            },
            bakeline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeunload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakedispatch:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeprocess:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakelogistics:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            welding:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detection:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            myChart1:'',
            myChart2:'',
            monthDayDate:['03-16','03-17','03-18','03-19','03-20','03-21','03-22'],
            bakeFinePercent:[88,93,90,88,93,90,88],
            weldingFinePercent:[94,91,94,91,94,91,92],
            detectionFinePercent:[95,96,95,96,95,96,92],
            weldingScanNGNumber:[136,124,155,136,124,155,112],
            dayProduction:{
                monthDayDate:[],
                bakeQualifiedNumber:[],
                bakeNoGoodNumber:[],
                bakeFinePercent:[],
                weldingQualifiedNumber:[],
                weldingNoGoodNumber:[],
                weldingFinePercent:[],
                detectionQualifiedNumber:[],
                detectionNoGoodNumber:[],
                detectionFinePercent:[],
                weldingScanNGNumber:[],
                weldingCheckNGNumber:[],
                weldingCleanNGNumber:[],
                weldingNailNGNumber:[],
                weldingHeightNGNumber:[],
                weldingPreWeldNGNumber:[],
                weldingFullWeldNGNumber:[],
                weldingWeldCheckNGNumber:[],
                detectionScanNGNumber:[],
                detectionCheckNGNumber:[]
            },
        }
    },
    watch:{
        'bakeline1load.status': function(newVal, oldVal){
            this.bakeloadstatuschange()
        },
        'bakeline2load.status': function(newVal, oldVal){
            this.bakeloadstatuschange()
        },
        'bakeline3load.status': function(newVal, oldVal){
            this.bakeloadstatuschange()
        },
        'bakeline1unload.status': function(newVal, oldVal){
            this.bakeunloadstatuschange()
        },
        'bakeline2unload.status': function(newVal, oldVal){
            this.bakeunloadstatuschange()
        },
        'bakeline3unload.status': function(newVal, oldVal){
            this.bakeunloadstatuschange()
        },
        'bakeline1dispatch.status': function(newVal, oldVal){
            this.bakedispatchstatuschange()
        },
        'bakeline2dispatch.status': function(newVal, oldVal){
            this.bakedispatchstatuschange()
        },
        'bakeline3dispatch.status': function(newVal, oldVal){
            this.bakedispatchstatuschange()
        },
        // 'bakeunload.status': function(newVal, oldVal){
        //     this.bakelogisticsstatuschange()
        //     switch(this.bakeunload.status){
        //         case '1':
        //             this.bakeunload.isrun=true
        //             this.bakeunload.isstandby=false
        //             this.bakeunload.isshutdown=false
        //             break;
        //         case '2':
        //             this.bakeunload.isrun=false
        //             this.bakeunload.isstandby=true
        //             this.bakeunload.isshutdown=false
        //             break;
        //         case '3':
        //             this.bakeunload.isrun=false
        //             this.bakeunload.isstandby=false
        //             this.bakeunload.isshutdown=true
        //             break;
        //         default:
        //             break;
        //     }
        // },
        // 'bakedispatch.status': function(newVal, oldVal){
        //     this.bakelogisticsstatuschange()
        //     switch(this.bakedispatch.status){
        //         case '1':
        //             this.bakedispatch.isrun=true
        //             this.bakedispatch.isstandby=false
        //             this.bakedispatch.isshutdown=false
        //             break;
        //         case '2':
        //             this.bakedispatch.isrun=false
        //             this.bakedispatch.isstandby=true
        //             this.bakedispatch.isshutdown=false
        //             break;
        //         case '3':
        //             this.bakedispatch.isrun=false
        //             this.bakedispatch.isstandby=false
        //             this.bakedispatch.isshutdown=true
        //             break;
        //         default:
        //             break;
        //     }
        // },
        // 'bakeload.status': function(newVal, oldVal){
        //     this.bakelogisticsstatuschange()
        //     switch(this.bakeload.status){
        //         case '1':
        //             this.bakeload.isrun=true
        //             this.bakeload.isstandby=false
        //             this.bakeload.isshutdown=false
        //             break;
        //         case '2':
        //             this.bakeload.isrun=false
        //             this.bakeload.isstandby=true
        //             this.bakeload.isshutdown=false
        //             break;
        //         case '3':
        //             this.bakeload.isrun=false
        //             this.bakeload.isstandby=false
        //             this.bakeload.isshutdown=true
        //             break;
        //         default:
        //             break;
        //     }
        // },
        'bakeline1Oven1.status': function(newVal, oldVal){
            this.bakeline1statuschange()
        },
        'bakeline1Oven2.status': function(newVal, oldVal){
            this.bakeline1statuschange()
        },
        'bakeline1CoolingBox.status': function(newVal, oldVal){
            this.bakeline1statuschange()
        },
        'bakeline1Oven3.status': function(newVal, oldVal){
            this.bakeline1statuschange()
        },
        'bakeline1Oven4.status': function(newVal, oldVal){
            this.bakeline1statuschange()
        },
        'bakeline2Oven1.status': function(newVal, oldVal){
            this.bakeline2statuschange()
        },
        'bakeline2Oven2.status': function(newVal, oldVal){
            this.bakeline2statuschange()
        },
        'bakeline2CoolingBox.status': function(newVal, oldVal){
            this.bakeline2statuschange()
        },
        'bakeline2Oven3.status': function(newVal, oldVal){
            this.bakeline2statuschange()
        },
        'bakeline2Oven4.status': function(newVal, oldVal){
            this.bakeline2statuschange()
        },
        'bakeline3Oven1.status': function(newVal, oldVal){
            this.bakeline3statuschange()
        },
        'bakeline3Oven2.status': function(newVal, oldVal){
            this.bakeline3statuschange()
        },
        'bakeline3CoolingBox.status': function(newVal, oldVal){
            this.bakeline3statuschange()
        },
        'bakeline3Oven3.status': function(newVal, oldVal){
            this.bakeline3statuschange()
        },
        'bakeline3Oven4.status': function(newVal, oldVal){
            this.bakeline3statuschange()
        },
        'weldingline1.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline1.status){
                case '1':
                    this.weldingline1.isrun=true
                    this.weldingline1.isstandby=false
                    this.weldingline1.isshutdown=false
                    break;
                case '2':
                    this.weldingline1.isrun=false
                    this.weldingline1.isstandby=true
                    this.weldingline1.isshutdown=false
                    break;
                case '3':
                    this.weldingline1.isrun=false
                    this.weldingline1.isstandby=false
                    this.weldingline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'weldingline2.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline2.status){
                case '1':
                    this.weldingline2.isrun=true
                    this.weldingline2.isstandby=false
                    this.weldingline2.isshutdown=false
                    break;
                case '2':
                    this.weldingline2.isrun=false
                    this.weldingline2.isstandby=true
                    this.weldingline2.isshutdown=false
                    break;
                case '3':
                    this.weldingline2.isrun=false
                    this.weldingline2.isstandby=false
                    this.weldingline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'weldingline3.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline3.status){
                case '1':
                    this.weldingline3.isrun=true
                    this.weldingline3.isstandby=false
                    this.weldingline3.isshutdown=false
                    break;
                case '2':
                    this.weldingline3.isrun=false
                    this.weldingline3.isstandby=true
                    this.weldingline3.isshutdown=false
                    break;
                case '3':
                    this.weldingline3.isrun=false
                    this.weldingline3.isstandby=false
                    this.weldingline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline1.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline1.status){
                case '1':
                    this.detectionline1.isrun=true
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=false
                    break;
                case '2':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=true
                    this.detectionline1.isshutdown=false
                    break;
                case '3':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline2.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline2.status){
                case '1':
                    this.detectionline2.isrun=true
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=false
                    break;
                case '2':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=true
                    this.detectionline2.isshutdown=false
                    break;
                case '3':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline3.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline3.status){
                case '1':
                    this.detectionline3.isrun=true
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=false
                    break;
                case '2':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=true
                    this.detectionline3.isshutdown=false
                    break;
                case '3':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'dayProduction.monthDayDate': function(newVal, oldVal){
            this.updateChart1()
            this.updateChart2()
        }
    },
    methods:{
        getCurrentState(){
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven1'))!==null){
                this.bakeline1Oven1.status = JSON.parse(localStorage.getItem('setBakeLine1Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven2'))!==null){
                this.bakeline1Oven2.status = JSON.parse(localStorage.getItem('setBakeLine1Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1CoolingBox'))!==null){
                this.bakeline1CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine1CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven3'))!==null){
                this.bakeline1Oven3.status = JSON.parse(localStorage.getItem('setBakeLine1Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven4'))!==null){
                this.bakeline1Oven4.status = JSON.parse(localStorage.getItem('setBakeLine1Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven1'))!==null){
                this.bakeline2Oven1.status = JSON.parse(localStorage.getItem('setBakeLine2Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven2'))!==null){
                this.bakeline2Oven2.status = JSON.parse(localStorage.getItem('setBakeLine2Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2CoolingBox'))!==null){
                this.bakeline2CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine2CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven3'))!==null){
                this.bakeline2Oven3.status = JSON.parse(localStorage.getItem('setBakeLine2Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven4'))!==null){
                this.bakeline2Oven4.status = JSON.parse(localStorage.getItem('setBakeLine2Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven1'))!==null){
                this.bakeline3Oven1.status = JSON.parse(localStorage.getItem('setBakeLine3Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven2'))!==null){
                this.bakeline3Oven2.status = JSON.parse(localStorage.getItem('setBakeLine3Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3CoolingBox'))!==null){
                this.bakeline3CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine3CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven3'))!==null){
                this.bakeline3Oven3.status = JSON.parse(localStorage.getItem('setBakeLine3Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven4'))!==null){
                this.bakeline3Oven4.status = JSON.parse(localStorage.getItem('setBakeLine3Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Load'))!==null){
                this.bakeline1load.status = JSON.parse(localStorage.getItem('setBakeLine1Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Unload'))!==null){
                this.bakeline1unload.status = JSON.parse(localStorage.getItem('setBakeLine1Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Dispatch'))!==null){
                this.bakeline1dispatch.status = JSON.parse(localStorage.getItem('setBakeLine1Dispatch')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Load'))!==null){
                this.bakeline2load.status = JSON.parse(localStorage.getItem('setBakeLine2Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Unload'))!==null){
                this.bakeline2unload.status = JSON.parse(localStorage.getItem('setBakeLine2Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Dispatch'))!==null){
                this.bakeline2dispatch.status = JSON.parse(localStorage.getItem('setBakeLine2Dispatch')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Load'))!==null){
                this.bakeline3load.status = JSON.parse(localStorage.getItem('setBakeLine3Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Unload'))!==null){
                this.bakeline3unload.status = JSON.parse(localStorage.getItem('setBakeLine3Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Dispatch'))!==null){
                this.bakeline3dispatch.status = JSON.parse(localStorage.getItem('setBakeLine3Dispatch')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setWeldingLine1'))!==null){
                this.weldingline1.status = JSON.parse(localStorage.getItem('setWeldingLine1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setWeldingLine2'))!==null){
                this.weldingline2.status = JSON.parse(localStorage.getItem('setWeldingLine2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setWeldingLine3'))!==null){
                this.weldingline3.status = JSON.parse(localStorage.getItem('setWeldingLine3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setDetectionLine1'))!==null){
                this.detectionline1.status = JSON.parse(localStorage.getItem('setDetectionLine1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setDetectionLine2'))!==null){
                this.detectionline2.status = JSON.parse(localStorage.getItem('setDetectionLine2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setDetectionLine3'))!==null){
                this.detectionline3.status = JSON.parse(localStorage.getItem('setDetectionLine3')).deviceStatus
            }
        },
        getDayProduction(){
            const dayProduction=JSON.parse(localStorage.getItem('setDayProduction'))
            console.log('近7天生产报表：',dayProduction)
            if(dayProduction!==null){
                this.dayProduction.monthDayDate=dayProduction.monthDayDate
                this.dayProduction.bakeQualifiedNumber=dayProduction.bakeQualifiedNumber
                this.dayProduction.bakeNoGoodNumber=dayProduction.bakeNoGoodNumber
                this.dayProduction.bakeFinePercent=dayProduction.bakeFinePercent
                this.dayProduction.weldingQualifiedNumber=dayProduction.weldingQualifiedNumber
                this.dayProduction.weldingNoGoodNumber=dayProduction.weldingNoGoodNumber
                this.dayProduction.weldingFinePercent=dayProduction.weldingFinePercent
                this.dayProduction.weldingScanNGNumber=dayProduction.weldingScanNGNumber
                this.dayProduction.weldingCheckNGNumber=dayProduction.weldingCheckNGNumber
                this.dayProduction.weldingCleanNGNumber=dayProduction.weldingCleanNGNumber
                this.dayProduction.weldingNailNGNumber=dayProduction.weldingNailNGNumber
                this.dayProduction.weldingHeightNGNumber=dayProduction.weldingHeightNGNumber
                this.dayProduction.weldingPreWeldNGNumber=dayProduction.weldingPreWeldNGNumber
                this.dayProduction.weldingFullWeldNGNumber=dayProduction.weldingFullWeldNGNumber
                this.dayProduction.weldingWeldCheckNGNumber=dayProduction.weldingWeldCheckNGNumber
                this.dayProduction.detectionQualifiedNumber=dayProduction.detectionQualifiedNumber
                this.dayProduction.detectionNoGoodNumber=dayProduction.detectionNoGoodNumber
                this.dayProduction.detectionFinePercent=dayProduction.detectionFinePercent
                this.dayProduction.detectionScanNGNumber=dayProduction.detectionScanNGNumber
                this.dayProduction.detectionCheckNGNumber=dayProduction.detectionCheckNGNumber
            }
        },
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        showAlarmPopup(value){
            if(value>0){
                this.dialogTableVisible=true
            }
            else{
                this.$notify({
                    title: '提示',
                    message: '没有报警信息',
                    type: 'warning'
                });
            }
        },
        getBackgroundColor(value){
            if(value>0){
                return '#FF4500'
            }
            else{
                return '#008000'
            }
        },
        getColor(value){
            if(value=='3'){
                return 'red'
            }
            else if(value=='2'){
                return 'yellow'
            }
            else{
                return ''
            }
        },
        bakeline1statuschange(){
            if(this.bakeline1Oven1.status=='1' && this.bakeline1Oven2.status=='1' && this.bakeline1CoolingBox.status=='1' && this.bakeline1Oven3.status=='1' && this.bakeline1Oven4.status=='1'){
                this.bakeline1.status='1'
                this.bakeline1.isrun=true
                this.bakeline1.isstandby=false
                this.bakeline1.isshutdown=false
            }
            else{
                if(this.bakeline1Oven1.status=='3' || this.bakeline1Oven2.status=='3' || this.bakeline1CoolingBox.status=='3' || this.bakeline1Oven3.status=='3' || this.bakeline1Oven4.status=='3'){
                    this.bakeline1.status='3'
                    this.bakeline1.isrun=false
                    this.bakeline1.isstandby=false
                    this.bakeline1.isshutdown=true
                }
                else{
                    this.bakeline1.status='2'
                    this.bakeline1.isrun=false
                    this.bakeline1.isstandby=true
                    this.bakeline1.isshutdown=false
                }       
            }
            this.bakeprocessstatuschange()
        },
        bakeline2statuschange(){
            if(this.bakeline2Oven1.status=='1' && this.bakeline2Oven2.status=='1' && this.bakeline2CoolingBox.status=='1' && this.bakeline2Oven3.status=='1' && this.bakeline2Oven4.status=='1'){
                this.bakeline2.status='1'
                this.bakeline2.isrun=true
                this.bakeline2.isstandby=false
                this.bakeline2.isshutdown=false
            }
            else{
                if(this.bakeline2Oven1.status=='3' || this.bakeline2Oven2.status=='3' || this.bakeline2CoolingBox.status=='3' || this.bakeline2Oven3.status=='3' || this.bakeline2Oven4.status=='3'){
                    this.bakeline2.status='3'
                    this.bakeline2.isrun=false
                    this.bakeline2.isstandby=false
                    this.bakeline2.isshutdown=true
                }
                else{
                    this.bakeline2.status='2'
                    this.bakeline2.isrun=false
                    this.bakeline2.isstandby=true
                    this.bakeline2.isshutdown=false
                }       
            }
            this.bakeprocessstatuschange()
        },
        bakeline3statuschange(){
            if(this.bakeline3Oven1.status=='1' && this.bakeline3Oven2.status=='1' && this.bakeline3CoolingBox.status=='1' && this.bakeline3Oven3.status=='1' && this.bakeline3Oven4.status=='1'){
                this.bakeline3.status='1'
                this.bakeline3.isrun=true
                this.bakeline3.isstandby=false
                this.bakeline3.isshutdown=false
            }
            else{
                if(this.bakeline3Oven1.status=='3' || this.bakeline3Oven2.status=='3' || this.bakeline3CoolingBox.status=='3' || this.bakeline3Oven3.status=='3' || this.bakeline3Oven4.status=='3'){
                    this.bakeline3.status='3'
                    this.bakeline3.isrun=false
                    this.bakeline3.isstandby=false
                    this.bakeline3.isshutdown=true
                }
                else{
                    this.bakeline3.status='2'
                    this.bakeline3.isrun=false
                    this.bakeline3.isstandby=true
                    this.bakeline3.isshutdown=false
                }       
            }
            this.bakeprocessstatuschange()
        },
        bakeprocessstatuschange(){
            if(this.bakeline1.status=='1' && this.bakeline2.status=='1' && this.bakeline3.status=='1'){
                this.bakeprocess.status='1'
                this.bakeprocess.isrun=true
                this.bakeprocess.isstandby=false
                this.bakeprocess.isshutdown=false
            }
            else{
                if(this.bakeline1.status=='3' || this.bakeline2.status=='3' || this.bakeline3.status=='3'){
                    this.bakeprocess.status='3'
                    this.bakeprocess.isrun=false
                    this.bakeprocess.isstandby=false
                    this.bakeprocess.isshutdown=true
                }
                else{
                    this.bakeprocess.status='2'
                    this.bakeprocess.isrun=false
                    this.bakeprocess.isstandby=true
                    this.bakeprocess.isshutdown=false
                }       
            }
        },
        bakeloadstatuschange(){
            if(this.bakeline1load.status=='1' && this.bakeline2load.status=='1' && this.bakeline3load.status=='1'){
                this.bakeload.status='1'
                this.bakeload.isrun=true
                this.bakeload.isstandby=false
                this.bakeload.isshutdown=false
            }
            else{
                if(this.bakeline1load.status=='3' || this.bakeline2load.status=='3' || this.bakeline3load.status=='3'){
                    this.bakeload.status='3'
                    this.bakeload.isrun=false
                    this.bakeload.isstandby=false
                    this.bakeload.isshutdown=true
                }
                else{
                    this.bakeload.status='2'
                    this.bakeload.isrun=false
                    this.bakeload.isstandby=true
                    this.bakeload.isshutdown=false
                }       
            }
            this.bakelogisticsstatuschange()
        },
        bakeunloadstatuschange(){
            if(this.bakeline1unload.status=='1' && this.bakeline2unload.status=='1' && this.bakeline3unload.status=='1'){
                this.bakeunload.status='1'
                this.bakeunload.isrun=true
                this.bakeunload.isstandby=false
                this.bakeunload.isshutdown=false
            }
            else{
                if(this.bakeline1unload.status=='3' || this.bakeline2unload.status=='3' || this.bakeline3unload.status=='3'){
                    this.bakeunload.status='3'
                    this.bakeunload.isrun=false
                    this.bakeunload.isstandby=false
                    this.bakeunload.isshutdown=true
                }
                else{
                    this.bakeunload.status='2'
                    this.bakeunload.isrun=false
                    this.bakeunload.isstandby=true
                    this.bakeunload.isshutdown=false
                }       
            }
            this.bakelogisticsstatuschange()
        },
        bakedispatchstatuschange(){
            if(this.bakeline1dispatch.status=='1' && this.bakeline2dispatch.status=='1' && this.bakeline3dispatch.status=='1'){
                this.bakedispatch.status='1'
                this.bakedispatch.isrun=true
                this.bakedispatch.isstandby=false
                this.bakedispatch.isshutdown=false
            }
            else{
                if(this.bakeline1dispatch.status=='3' || this.bakeline2dispatch.status=='3' || this.bakeline3dispatch.status=='3'){
                    this.bakedispatch.status='3'
                    this.bakedispatch.isrun=false
                    this.bakedispatch.isstandby=false
                    this.bakedispatch.isshutdown=true
                }
                else{
                    this.bakedispatch.status='2'
                    this.bakedispatch.isrun=false
                    this.bakedispatch.isstandby=true
                    this.bakedispatch.isshutdown=false
                }       
            }
            this.bakelogisticsstatuschange()
        },
        bakelogisticsstatuschange(){
            if(this.bakeunload.status=='1' && this.bakedispatch.status=='1' && this.bakeload.status=='1'){
                this.bakelogistics.status='1'
                this.bakelogistics.isrun=true
                this.bakelogistics.isstandby=false
                this.bakelogistics.isshutdown=false
            }
            else{
                if(this.bakeunload.status=='3' || this.bakedispatch.status=='3' || this.bakeload.status=='3'){
                    this.bakelogistics.status='3'
                    this.bakelogistics.isrun=false
                    this.bakelogistics.isstandby=false
                    this.bakelogistics.isshutdown=true
                }
                else{
                    this.bakelogistics.status='2'
                    this.bakelogistics.isrun=false
                    this.bakelogistics.isstandby=true
                    this.bakelogistics.isshutdown=false
                }       
            }
        },
        weldingstatuschange(){
            if(this.weldingline1.status=='1' && this.weldingline2.status=='1' && this.weldingline3.status=='1'){
                this.welding.status='1'
                this.welding.isrun=true
                this.welding.isstandby=false
                this.welding.isshutdown=false
            }
            else{
                if(this.weldingline1.status=='3' || this.weldingline2.status=='3' || this.weldingline3.status=='3'){
                    this.welding.status='3'
                    this.welding.isrun=false
                    this.welding.isstandby=false
                    this.welding.isshutdown=true
                }
                else{
                    this.welding.status='2'
                    this.welding.isrun=false
                    this.welding.isstandby=true
                    this.welding.isshutdown=false
                }       
            }
        },
        detectionstatuschange(){
            if(this.detectionline1.status=='1' && this.detectionline2.status=='1' && this.detectionline3.status=='1'){
                this.detection.status='1'
                this.detection.isrun=true
                this.detection.isstandby=false
                this.detection.isshutdown=false
            }
            else{
                if(this.detectionline1.status=='3' || this.detectionline2.status=='3' || this.detectionline3.status=='3'){
                    this.detection.status='3'
                    this.detection.isrun=false
                    this.detection.isstandby=false
                    this.detection.isshutdown=true
                }
                else{
                    this.detection.status='2'
                    this.detection.isrun=false
                    this.detection.isstandby=true
                    this.detection.isshutdown=false
                }       
            }
        },
        initChart() {
            var chartDom1 = document.getElementById('chart1');
            var chartDom2 = document.getElementById('chart2');
            this.myChart1 = echarts.init(chartDom1);
            this.myChart2 = echarts.init(chartDom2);
        },
        fetchData() {
            this.updateChart1();
            this.updateChart2();
        },
        updateChart1(){
            // const bake_SumProducts = this.bake_OkProducts.map((item, index) => item + this.bake_NgProducts[index]);
            // const bakeYield = this.bake_OkProducts.map((item, index) => (item / bake_SumProducts[index] * 100).toFixed(1));
            var element = document.getElementById('chart1');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '30%',
                    bottom: '1%',
                    containLabel: true
                },
                legend: {
                    textStyle:{
                        color:'white',
                        fontSize:9
                    },
                    // top:'1%',
                    left:'2%',
                    orient: 'horizontal', // 水平排列图例
                    width: '80%', // 设置图例宽度为容器宽度的50%
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '近七天产能良率数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    right: '1%',
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.dayProduction.monthDayDate,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    // name: '数量',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:5,
                        color:'white',
                        fontSize:10
                    }
                    },
                    {
                    type: 'value',
                    // name: '良率',
                    // nameTextStyle: {
                    //     color: 'white',
                    //     padding: -5
                    // },
                    splitLine:{
                        show:false
                    },
                    // min: 0,
                    // max: 100,
                    // interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:5,
                        color:'white',
                        fontSize:10
                    }
                    },
                    // {
                    // type: 'value',
                    // show: false,
                    // splitLine:{
                    //     show:false
                    // },
                    // // min: 0,
                    // // max: 100,
                    // // interval: 20,
                    // axisLabel: {
                    //     formatter: '{value} %',
                    //     margin:0,
                    //     color:'white',
                    //     fontSize:10
                    // }
                    // },
                    // {
                    // type: 'value',
                    // show: false,
                    // splitLine:{
                    //     show:false
                    // },
                    // // min: 0,
                    // // max: 100,
                    // // interval: 20,
                    // axisLabel: {
                    //     formatter: '{value} %',
                    //     margin:0,
                    //     color:'white',
                    //     fontSize:10
                    // }
                    // },
                ],
                series: [
                    {
                    name: '烘烤合格品',
                    type: 'bar',
                    stack: 'bake',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#00FF7F' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.bakeQualifiedNumber
                    },
                    {
                    name: '烘烤NG品',
                    type: 'bar',
                    stack: 'bake',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#FFD700' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.bakeNoGoodNumber
                    },
                    {
                    name: '封口焊合格品',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#9400D3' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.weldingQualifiedNumber
                    },
                    {
                    name: '封口焊NG品',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#D2691E' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.weldingNoGoodNumber
                    },
                    {
                    name: '二次氦检合格品',
                    type: 'bar',
                    stack: 'detection',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#1E90FF' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.detectionQualifiedNumber
                    },
                    {
                    name: '二次氦检NG品',
                    type: 'bar',
                    stack: 'detection',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    itemStyle: {
                        color: '#FF7F50' 
                    },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.detectionNoGoodNumber
                    },
                    {
                    name: '烘烤良率',
                    type: 'line',
                    yAxisIndex:1,
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    itemStyle: {
                        color: '#00FF7F' 
                    },
                    data: this.dayProduction.bakeFinePercent,
                    // label: {
                    //     show: true,
                    //     position:'top',
                    //     fontSize: 7,
                    //     // fontWeight: 'bold',
                    //     color:'#FFFFFF',
                    //     formatter: '{c}%' // 显示百分比数值
                    // }
                    },
                    {
                    name: '封口焊良率',
                    type: 'line',
                    yAxisIndex:1,
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    itemStyle: {
                        color: '#9400D3' 
                    },
                    data: this.dayProduction.weldingFinePercent,
                    // label: {
                    //     show: true,
                    //     position:'top',
                    //     fontSize: 7,
                    //     // fontWeight: 'bold',
                    //     color:'#FFFFFF',
                    //     formatter: '{c}%' // 显示百分比数值
                    // }
                    },
                    {
                    name: '二次氦检良率',
                    type: 'line',
                    yAxisIndex:1,
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    itemStyle: {
                        color: '#1E90FF' 
                    },
                    data: this.dayProduction.detectionFinePercent,
                    // label: {
                    //     show: true,
                    //     position:'top',
                    //     fontSize: 7,
                    //     // fontWeight: 'bold',
                    //     color:'#FFFFFF',
                    //     formatter: '{c}%' // 显示百分比数值
                    // }
                    },
                ]
            };
            this.myChart1.setOption(option);
        },
        updateChart2(){
            var element = document.getElementById('chart2');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '30%',
                    bottom: '2%',
                    containLabel: true
                },
                legend: {
                    textStyle:{
                        color:'white',
                        fontSize:8
                    },
                    // top:'1%',
                    left:'2%',
                    orient: 'horizontal', // 水平排列图例
                    width: '90%', // 设置图例宽度为容器宽度的50%
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '近七天NG类别数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    right: '1%',
                    itemSize:12,    // 工具栏 icon 的大小
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.dayProduction.monthDayDate,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    // name: '数量',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:5,
                        color:'white',
                        fontSize:10
                    }
                    }
                ],
                series: [
                    {
                    name: '烘烤扫码NG',
                    type: 'bar',
                    // stack: 'bake',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    // itemStyle: {
                    //     color: '#FFD700' 
                    // },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.bakeNoGoodNumber
                    },
                    {
                    name: '封口焊扫码NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    // itemStyle: {
                    //     color: '#9400D3' 
                    // },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.weldingScanNGNumber
                    },
                    {
                    name: '封口焊检测NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingCheckNGNumber
                    },
                    {
                    name: '封口焊清洗NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingCleanNGNumber
                    },
                    {
                    name: '封口焊上钉NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingNailNGNumber
                    },
                    {
                    name: '封口焊多点测高NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingHeightNGNumber
                    },
                    {
                    name: '封口焊预焊NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingPreWeldNGNumber
                    },
                    {
                    name: '封口焊全焊NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingFullWeldNGNumber
                    },
                    {
                    name: '封口焊焊后检NG',
                    type: 'bar',
                    stack: 'welding',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    data: this.dayProduction.weldingWeldCheckNGNumber
                    },
                    {
                    name: '二次氦检扫码NG',
                    type: 'bar',
                    stack: 'detection',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    // itemStyle: {
                    //     color: '#1E90FF' 
                    // },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.detectionScanNGNumber
                    },
                    {
                    name: '二次氦检检测NG',
                    type: 'bar',
                    stack: 'detection',
                    emphasis: {
                        focus: 'series'
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        }
                    },
                    // itemStyle: {
                    //     color: '#FF7F50' 
                    // },
                    // emphasis: {
                    //     focus: 'series'
                    // },
                    data: this.dayProduction.detectionCheckNGNumber
                    }
                ]
            };
            this.myChart2.setOption(option);
        }
    }
}
</script>